<template>
  <div id="content">
    <div id="bg">
      <div id="stores">
        <div
          v-for="(item, index) in info"
          :key="index"
          @click="changeChose(item.id)"
          class="store_all"
          :class="{ open: item.id == chose }"
        >
          <div v-show="update_store != item.id" class="store">
            <div class="name">{{ item.name }}</div>
            <div class="description">{{ item.description }}</div>
            <div class="time">
              {{ item.updateTime }}
            </div>
          </div>
          <UpdateStore v-if="update_store == item.id" />
          <div class="option" v-show="chose == item.id">
            <div
              class="buttons b_open"
              @click="toStoreGoods(item.id, item.name)"
            >
              打开
            </div>
            |
            <div class="buttons b_update" @click.stop="updateStore(item.id)">
              {{ update_message }}
            </div>
            |
            <div class="buttons b_delete" @click="deleteStore(item.id)">
              删除
            </div>
          </div>
        </div>
        <div v-show="add" class="store_all">
          <div class="store">
            <input autocomplete="off" v-model="add_name" class="name" type="text" />
            <input autocomplete="off"
              v-model="add_description"
              class="description"
              type="text"
              placeholder="填写备注信息"
            />
            <div class="time submit" @click="submitInfo">提交信息</div>
          </div>
        </div>
        <div style="height: 50px" class="store_all">
          <div class="store">
            <div style="fontSize=15px" class="name" @click="addStore">
              {{ message }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import UpdateStore from '../components/updateStore';
export default {
  name: 'store',
  computed: {
    ...mapState(['ownerId']),
  },
  components: {
    UpdateStore,
  },
  data() {
    return {
      info: [],
      message: '点击新建仓库',
      update_message: '修改',
      isAdding: false,
      chose: 0,
      store: '',
      action: 'add',
      add: false,
      add_name: '',
      add_description: '',
      update_store: '',
    };
  },

  mounted() {
    this.getStoreInfo();
  },
  methods: {
    changeChose(id) {
      if (this.chose == id) {
        if (this.chose == -1) {
          this.chose = -1;
        }
        if (this.update_store != -1) {
          this.chose == -1;
        }
        return;
      }
      this.chose = id;
      this.update_store = -1;
      this.update_message = '修改';
    },
    addStore() {
      this.add = !this.add;
      if (this.add) {
        this.message = '取消添加仓库';
      } else {
        this.message = '点击新建仓库';
      }
    },
    updateStore(id) {
      if (this.update_store == id) {
        this.update_store = -1;
        this.chose = -1;
        this.update_message = '修改';
        return;
      }
      this.update_store = id;
      if (this.update_store == id) {
        this.update_message = '取消';
      } else {
        this.update_message = '修改';
      }
      this.$store.dispatch('set_storeId', id);
    },
    deleteStore(id) {
      var rs = prompt(
        '确定要删除该仓库吗？此操作会删除所有仓库内的商品！',
        '删除所有商品风险较大，请在此输入‘delete’'
      );
      if (rs != null) {
        if (rs == 'delete') {
          this.deleteStoreById(id);
        } else {
          alert('输入错误！');
        }
      }
    },
    async deleteStoreById(id) {
      try {
        const res = await this.$axios.post(`http://work.caike.online/store`, {
          action: 'delete',
          id: id,
        });
        console.log('res', res);
        if (res.data.status == 1) {
          this.$message({
            message: '删除成功',
            type: 'success',
            offset: 70,
          });
          window.location.href = '/store';
        }
      } catch (err) {
        this.$message({
          message: '查询失败',
          type: 'error',
          offset: 70,
        });
        console.log(err);
      }
    },
    async submitInfo() {
      //   this.$message({
      //     message: 'submit 添加仓库',
      //     type: 'info',
      //     offset: 70,
      //   });
      if (this.add_name.length == 0 || this.add_description.length == 0) {
        this.$message({
          message: '请完整填写信息噢~',
          type: 'error',
          offset: 70,
        });
        return;
      }
      const updateTime = Date.parse(new Date()).toString().substr(0, 10);
      try {
        const res = await this.$axios.post(`http://work.caike.online/store`, {
          action: 'add',
          ownerId: this.ownerId,
          name: this.add_name,
          description: this.add_description,
          updateTime: updateTime,
        });
        console.log('res', res);
        if (res.data.status == 1) {
          this.$message({
            message: '添加成功',
            type: 'success',
            offset: 70,
          });
          window.location.href = '/store';
        } else {
          this.$message({
            message: '添加失败',
            type: 'error',
            offset: 70,
          });
        }
      } catch (err) {
        this.$message({
          message: '发送请求失败',
          type: 'error',
          offset: 70,
        });
        console.log(err);
      }
    },
    toStoreGoods(id, name) {
      this.$store.dispatch('set_storeId', id);
      this.$store.dispatch('set_storeName', name);
      window.location.href = '/store/goods';
    },
    async getStoreInfo() {
      try {
        const res = await this.$axios.post(`http://work.caike.online/store`, {
          action: 'queryAll',
          ownerId: this.ownerId,
        });
        console.log('res', res);
        if (res.data.status == 1) {
          this.info = res.data.info;
          this.toTimeStamp();
          console.log('info: ', this.info);
        }
      } catch (err) {
        this.$message({
          message: '查询失败',
          type: 'error',
          offset: 70,
        });
        console.log(err);
      }
    },
    toTimeStamp() {
      this.info.forEach((item) => {
        item.updateTime = this.changeTime(item.updateTime);
      });
    },
    changeTime(sj) {
      sj = parseInt(sj) * 1000;
      const date = new Date(sj); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const dateNumFun = (num) => (num < 10 ? `0${num}` : num);
      const Y = `${date.getFullYear()}/`;
      const M = `${dateNumFun(date.getMonth() + 1)}/`;
      const D = `${dateNumFun(date.getDate())} `;
      const h = `${dateNumFun(date.getHours())}:`;
      const m = `${dateNumFun(date.getMinutes())}:`;
      const s = `${dateNumFun(date.getSeconds())}`;
      return Y + M + D + h + m + s;
    },
  },
};
</script>


<style lang="less" scoped>
#content {
  width: 100%;
  height: 100%;
  #bg {
    width: 100%;
    height: 100%;
    background-image: url('../assets/bg/2.jpg');
    position: fixed;
    top: 0;
    left: 0;
    // z-index: -10;

    background-position: center 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    zoom: 1;
    opacity: 1;

    display: flex;
    flex-direction: column;
    padding-top: 90px;

    #stores {
      width: 80%;
      margin: 10px auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .store_all {
        width: 20%;
        height: 200px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.534);

        margin: 5px 10px;
        margin-bottom: 30px;

        .store {
          width: 100%;
          height: 200px;
          display: flex;
          flex-direction: column;
          padding: 10px;
          color: white;

          .name {
            text-align: start;
            font-size: 18px;
            // font-weight: bold;
            padding-bottom: 5px;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.719);
          }
          .name:hover {
            // font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.8s ease;
          }
          .description {
            font-family: '楷体';
            padding-top: 5px;
            text-align: start;
            vertical-align: top;
            text-indent: 2em;
            font-size: 14px;
            height: 150px;
          }
          .time {
            //   align-self: flex-end;
            text-align: end;
            padding-top: 5px;
            border-top: 1px dashed rgba(255, 255, 255, 0.719);
            font-size: 12px;
          }

          input {
            vertical-align: top;
            background-color: transparent;
            outline: none;
            color: white;
          }
          .submit {
            text-align: center;
            text-decoration: underline;
          }
          .submit:hover {
            color: rgba(0, 255, 255, 0.664);
            font-weight: bold;
            cursor: pointer;
          }
        }

        .option {
          // transition: all 1.0s ease;
          padding: 5px 20px;
          // margin: 0px 10px;
          font-size: 12px;
          color: white;
          border-top: 1px solid rgba(255, 255, 255, 0.699);
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          border-radius: 10px;

          background-color: transparent;

          .b_open:hover {
            cursor: pointer;
          }
        }
      }
      .store_all:hover {
        transition: all 0.8s ease;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.753);
      }

      .open {
        height: 225px;
        margin-bottom: 5px;
        transition: all 0.5s ease;
      }
    }
  }
}
</style>